<template>
  <div>
    <div class="box1">
      <van-nav-bar title="转增中心" left-arrow />
    </div>
    <div class="box2">
      <van-steps :active="active" active-color="#38f">
        <van-step>开始转增</van-step>
        <van-step>转增人信息</van-step>
        <van-step>转增藏品信息</van-step>
        <van-step>转增完成</van-step>
      </van-steps>
      <van-button type="primary" @click="selecter" color="rgb(25,137,250)" block
        >下一步</van-button
      >
    </div>
    <div class="box3" v-if="active == 0">
      <van-empty description="开始转增操作" />
    </div>
    <div class="box4" v-if="active == 1">
      <van-search v-model="value" placeholder="请输入要转增的用户名" />
      <div class="box4-1">
        <van-card :desc="user.name" title="用户信息" :thumb="user.img" />
      </div>
    </div>
    <div class="box5" v-if="active == 2">
      <van-tree-select
        height="70vh"
        :items="select.items"
        :main-active-index.sync="select.active"
      >
        <template #content>
          <van-image
            v-if="select.active === 0"
            src="https://img01.yzcdn.cn/vant/apple-1.jpg"
          />
          <van-image
            v-if="select.active === 1"
            src="https://img01.yzcdn.cn/vant/apple-2.jpg"
          />
        </template>
      </van-tree-select>
    </div>
    <div class="box6" v-if="active == 3"></div>
  </div>
</template>

<script>
export default {
  name: "Increase",
  data() {
    return {
      active: 0,
      value: "",
      user: {
        name: "pig",
        img: "/favicon.ico",
      },
      select: {
        active: 0,
        items: [{ text: "分组 1" }, { text: "分组 2" }],
      },
    };
  },
  methods: {
    selecter() {
      if (this.active >= 3) {
        this.active = 0;
        return;
      }
      this.active++;
    },
  },
};
</script>

<style scoped>
.box1,
.box2,
.box3,
.box4 {
  padding: 10px 10px;
}
</style>